<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MyBlog | 权限编辑</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../static/build/css/app.min.css" th:href="${#fn.getStaticFile('/build/css/app.min.css')}">
    <link rel="stylesheet" href="../../static/lib/plugins/handsontable/handsontable.full.css" th:href="${#fn.getStaticFile('/lib/plugins/handsontable/handsontable.full.css')}"/>
    <link rel="stylesheet" href="../../static/dist/css/common.css" th:href="${#fn.getStaticFile('/dist/css/common.css')}">
    <script src="../../static/build/js/app.min.js" th:src="${#fn.getStaticFile('/build/js/app.min.js')}"></script>
    <script src="../../static/lib/plugins/jquery-validation/1.11.1/jquery.validate.min.js" th:src="${#fn.getStaticFile('/lib/plugins/jquery-validation/1.11.1/jquery.validate.min.js')}"></script>
    <script src="../../static/lib/plugins/handsontable/handsontable.full.js" th:src="${#fn.getStaticFile('/lib/plugins/handsontable/handsontable.full.js')}"></script>
    <script src="../../static/lib/plugins/jquery.form.js" th:src="${#fn.getStaticFile('/lib/plugins/jquery.form.js')}"></script>
    <script src="../../static/dist/js/common.js" th:src="${#fn.getStaticFile('/dist/js/common.js')}"></script>
    <script th:inline="javascript">
        $(document).ready(function () {
            $("#btnSubmit").click(function () {
                $("#btnSubmit").attr("disabled", true);
                $("#permissionForm").submit();
            });
            var data = [[${data}]];
            var menus = [[${menus}]];
            var hot = $("#grid").handsontable({
                rowHeaders: true,
                colHeaders:["ID", "菜单", "名称", "编码"],
                columnSorting: true,
                autoWrapRow: true,
                autoColumnSize: true,
                minSpareRows: 1,
                data: data,
                columns: [{
                    readOnly:true,
                    allowEmpty: true,
                    width: 1
                }, {
                    allowEmpty: false,
                    type: "autocomplete",
                    source: menus
                }, {
                    allowEmpty: false
                }, {
                    allowEmpty: false
                }],
                contextMenu: ['row_above', 'row_below', 'remove_row']
            });
            $("#permissionForm").validate({
                invalidHandler: function (event, validator) {
                    $("#btnSubmit").attr("disabled", true);
                },
                submitHandler: function (form) {
                    if (confirm("确认保存？")) {
                        if ($("#checkError").text()) {
                            $("#btnSubmit").attr("disabled", false);
                            alert("数据存在问题，无法提交");
                            return;
                        }
                        var ht = $('#grid').handsontable('getInstance');
                        var datas = JSON.stringify(ht.getNotEmptyData());
                        $("#data").val(datas);
                        form.submit();
                    } else {
                        $("#btnSubmit").attr("disabled", false);
                    }
                }
            });
        });
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini " th:classappend="${#session.getAttribute('sidebarClass')}" th:with="pageCode='permissionForm'">
    <div class="wrapper">
    <!-- Main Header -->
    <div th:replace="fragment/layout :: header"></div>
    <!-- Left side column. contains the logo and sidebar -->
    <div th:replace="fragment/layout :: menu(activePageCode=${pageCode})"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <!-- Nav tabs -->
            <ul th:replace="fragment/menuTab :: menuTab(activePageCode=${pageCode})"></ul>
            <div class="panel panel-info">
                <div th:if="${message!=null}"  th:class="'alert alert-'+${message.type}" th:text="${message.code}"></div>
                <div class="panel-body">
                    <form id="permissionForm" th:action="@{/sys/permission/save}" method="post" class="form-horizontal">
                        <input type="hidden" id="data" name="data" value=""/>
                        <button type="button" class="btn btn-primary" id="btnSubmit">
                            <span class="glyphicon glyphicon-ok"></span>保存
                        </button>
                    </form>
                    <br/>
                    <span id="checkError" style="color: red"></span>
                    <div id="grid"></div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <div th:replace="fragment/layout :: footer"></div>
</div>
</body>
</html>